<div class="dataTable">
  <div class="title">{{'DataManagement.RoadCongestionReport.RoadCongestionReport' | translate}}</div>

  <div class="table-content">
    <div class="report_filter1">
      <div style="display: flex;align-items: center">
        <div style="font-weight: bold;font-size:14px">{{'DataManagement.RoadCongestionReport.DetectorRoad' | translate}}
        </div>
        <nz-select nzPlaceHolder=" VBID-DMM120_ccc  Road1" style="width: 2rem" nzAllowClear [(ngModel)]="roadSelect"
          (ngModelChange)='roadSearch()' nzMode="multiple" [nzDropdownMatchSelectWidth]="false" [nzMaxTagCount]="1">
          <nz-option *ngFor="let option of roadOptions" [nzValue]="option.name" [nzLabel]="option.displayName">
          </nz-option>
        </nz-select>
        <!-- <span nz-col nzSpan="2">
          <i class="iconfont icon-dingwei" style="cursor: pointer"></i>
        </span> -->
      </div>

      <div style="display: flex;align-items: center">
        <div style="font-weight: bold;font-size:14px">{{'DataManagement.RoadCongestionReport.TimeRange' | translate}}
        </div>
        <!-- <nz-range-picker nzFormat="yyyy-MM-dd" nzSize="default" [(ngModel)]="dateRange" (nzOnOk)="onOk($event)"
        (ngModelChange)="onChange($event)"></nz-range-picker>
      <nz-time-picker style="margin: 0 20px" nzPlaceHolder='Start Time' [(ngModel)]="startTime" nzFormat="HH:mm"
        (ngModelChange)='startTimeSearch()'></nz-time-picker>
      <nz-time-picker nzPlaceHolder='End Time' [(ngModel)]="endTime" nzFormat="HH:mm" (ngModelChange)='endTimeSearch()'>
      </nz-time-picker> -->
        <nz-range-picker [nzPlaceHolder]="['Start Time', 'End Time']" [(ngModel)]="dateRange"
          (ngModelChange)="onChange($event)" (nzOnOk)="onOk($event)" [nzDisabledDate]="disabledDate"
          [nzDisabledTime]="disabledRangeTime" [nzFormat]="'yyyy/MM/dd'">
        </nz-range-picker>
      </div>

      <div style="display: flex;align-items: center">
        <div style="font-weight: bold;font-size:14px">{{'DataManagement.RoadCongestionReport.Include' | translate}}
        </div>
        <nz-select nzPlaceHolder=" include" style="width: 2rem" nzAllowClear [(ngModel)]="includeSelect"
          (ngModelChange)='includeSearch()'>
          <nz-option *ngFor="let option of includeOptions" [nzValue]="option.id"
            [nzLabel]="'DataManagement.TrafficDataReport.'+option.name|translate">
          </nz-option>
        </nz-select>
      </div>

      <div style="display: flex;align-items: center">
        <div style="font-weight: bold;font-size:14px">{{'DataManagement.RoadCongestionReport.Interval' | translate}}
        </div>
        <nz-select nzPlaceHolder=" interval" style="width: 2rem" nzAllowClear [(ngModel)]="intervalSelect"
          (ngModelChange)='intervalSearch()'>
          <nz-option *ngFor="let option of intervalOptions" [nzValue]="option.name"
            [nzLabel]="'DataManagement.TrafficDataReport.'+option.name|translate">
          </nz-option>
        </nz-select>
      </div>
    </div>

    <div class="report_filter2">
      <div style="display: flex;align-items: center">
        <div style="font-weight: bold;font-size:14px">{{'DataManagement.RoadCongestionReport.SpeedThreshold' |
          translate}}
        </div>
        <nz-select nzPlaceHolder=" speed" style="width: 2rem" nzAllowClear [(ngModel)]="speedSelect"
          (ngModelChange)='speedSearch()'>
          <nz-option *ngFor="let option of speedOptions" [nzValue]="option.name" [nzLabel]="option.name">
          </nz-option>
        </nz-select>
      </div>

      <!-- <div class="searchButton" (click)="search()">{{'DataManagement.RoadCongestionReport.Search' | translate}}</div> -->
      <button nz-button nzType="primary" (click)="search()" style="margin-left: 30px;">
        <i nz-icon nzType="search" nzTheme="outline"></i>{{'DataManagement.RoadCongestionReport.Search' | translate}}
      </button>
    </div>

    <div class="report" *ngIf="isEchartsShow">
      <div class="report_data">
        <div class="report_title">
          {{'DataManagement.RoadCongestionReport.CongestionTime' | translate}}
        </div>
        <div class="echarts-table" echarts [options]="options" (chartInit)="onChartInit($event)"
          [merge]="updateOptions">
        </div>
      </div>
    </div>
    
  </div>


</div>